Skip to content

Conversation

@bhavyasaggi
Copy link

Fixes storybookjs/storybook#32355 & storybookjs/storybook#32354

Problem

On Windows machine, an image imports includes backslashes in the imagePath query-param. Eg. virtual:next-image?imagePath=C:\\codebase\\images\\sprite.svg.

Solution

Transform the imagePath to use forwardSlash when generating resolveId

@brettpostin
Copy link

Thanks for the quick fix. Any estimated timescales for this being released as it's sort of a blocking issue right now?

Alternatively, any suggested workaround?

@Stanzilla
Copy link

Fixes storybookjs/storybook#32355 & storybookjs/storybook#32354

Problem

On Windows machine, an image imports includes backslashes in the imagePath query-param. Eg. virtual:next-image?imagePath=C:\\codebase\\images\\sprite.svg.

Solution

Transform the imagePath to use forwardSlash when generating resolveId

Are you sure this is enough for a full fix? I tried it and then started failing on Linux as well.

Currently looking into trying something like this:

vite-plugin-storybook-nextjs+3.0.0.patch

@valentinpalkovic
Copy link
Contributor

Could you all please try out the following canary version: 3.0.3--canary.ca2a5b0.0. Just use the resolutions/overrides field of your package.json!

@brettpostin
Copy link

@valentinpalkovic as i was on storybook 9 i had to upgrade to 10.

This seemingly fixed it without the canary version...

@valentinpalkovic
Copy link
Contributor

Fixed in Storybook 10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: next-image mock in nextjs/vite produces invalid paths on windows builds

4 participants